<style lang="stylus" scoped>
@import '../styl/var.styl'

nav
  margin-right 1px
  box-sizing border-box
  display flex
  align-items center
  justify-content space-between
  padding 5px 2px
  background #fff
  border-radius 14px
  flex 1

a, b, code
  display inline-flex
  position relative

a
  background 50% 50% / 24px no-repeat
  margin auto 6px
  width 36px
  flex-shrink 0

  &:hover
    border-color darken(bg, 10%)
    box-shadow 0 0 9px inset #eee

nav>a:first-child
  margin-left 6px

a, i, code
  box-sizing border-box
  border-radius 8px
  height 36px
  border 1px solid #F4F5F7
  background-color bg

b
  height 25px
  border 1px solid #f5f6f8
  margin 0 6px

code
  padding 0 12px 0 24px
  line-height 35px
  font-style normal
  font-size 13px
  background #f9fafb
  position relative
  margin 0 6px
  color #474D59

  span
    display block
    margin 0 3px

  &:before
    content ''
    background #FD9D4B
    height 6px
    width 6px
    left 11px
    border-radius 4px
    position absolute
    top 15px

a.expand, a.left
  background-color transparent
  border none
  opacity 0.3
  margin-left 0

  &:hover
    opacity 1

a.expand
  display none
  margin auto
  width 28px
  background-image url('!/svg/left.svg')
  transform rotate(180deg)

nav.pause
  & > a.pause
    background-image url('!/svg/goon.svg') !important

a.audio
  background-position 50% 40%
  background-image url('!/svg/audio.svg')

a.video
  background-image url('!/svg/video.svg')

a.cancel
  background-image url('!/svg/cancel.svg')

a.txt
  background-image url('!/svg/txt.svg')

a.pen
  background-image url('!/svg/pen.svg')

a.rect
  background-image url('!/svg/rect.svg')

a.pen, a.rect, a.txt
  &.now
    box-shadow 0 0 7px inset #999

a.left
  background-image url('!/svg/left.svg')

a.pause
  background-image url('!/svg/pause.svg')

a.stop
  background-image url('!/svg/stop.svg')

a.reset
  background-image url('!/svg/reset.svg')

:deep(a.x)
  &:before
    content ''
    width 17px
    height 18px
    position absolute
    background-repeat no-repeat
    background-image url('!/svg/x.svg')
    left 8px
    top 7px

nav.pause > code, code.pause
  color #ccc

  &:before
    background #ccc

@media (max-width 500px)
  .draw
    display none

.draw
  align-items center

@media (max-width 172px)
  a, b
    display none

  a.expand, a.stop
    margin 0
    display inline-flex

  a.expand
    background-color transparent
</style>
<template lang="pug">
nav(:class="{ pause }" ref="nav")
  template(v-for="([en, cn], pos) in left")
    a(:class="[en, config[en] ? '' : 'x']" :title="cn" @click="go(en)")
  z-audio(@click="go('audio')")
  b
  code.pause(ref="code")
    | {{ minute }}
    span :
    | {{ second }}
  template(v-for="([en, cn], pos) in right")
    a(:class="[en]" :title="cn" @click="go(en)")

  .draw
    b
    a.pen(:class="{ now: draw == 'pen' }" @click="go('pen')" title="画笔")
    a.rect(:class="{ now: draw == 'rect' }" @click="go('rect')" title="画框")
    a.txt(:class="{ now: draw == 'txt' }" @click="go('txt')" title="文字")
  a.left(@click="go('left')" title="收起")
  a.expand(@click="go('expand')")
</template>

<script lang="coffee">
import ipc from '~/lib/ipc.coffee'
{recbar} = ipc
import broadcast from '~/lib/broadcast.coffee'
import ON from '~/lib/broadcast/on.coffee'
import drag from '~/lib/drag.coffee'
import '~/styl/win/border.styl'
import config from '~/store/record.coffee'
import {hm} from '~/lib/time.coffee'
import DRAW from '~/store/draw.coffee'
import zAudio from '~/vue/audio.vue'
[
  minute
  second
  time_run
  time_pause
] = hm()

sp = (s)=>
  (i.split(' ') for i from s.split("\n"))


pause = shallowRef(false)
START = false
code = shallowRef()
_pause = (value)=>
  [
    time_run
    time_pause
  ][value-0]()
  return

turn_pause = =>
  {value} = pause
  value = !value
  broadcast.pause(
    pause.value = value
  )
  if not START
    return
  _pause value
  return

local = {
  pause: turn_pause
  reset:=>
    if START
      if not pause.value
        turn_pause()
      nextTick => # fix 重新录制  和  取消录制 ，虽然在点击后先暂停了，但是恢复的时候 还是会把弹窗消失时录进去
        if await ipc.confirm.show('reset')
          broadcast.reset()
        else
          turn_pause()
    return

  cancel:=>
    if not START
      await recbar.cancel()
      return

    if not pause.value
      turn_pause()

    nextTick => # fix 重新录制  和  取消录制 ，虽然在点击后先暂停了，但是恢复的时候 还是会把弹窗消失时录进去
      if await ipc.confirm.show('cancel')
        broadcast.cancel()
      else
        turn_pause()
    return
  stop: =>
    broadcast.stop()
    time_pause()
    return

}


ON.start = =>
  time_run()
  START = true
  code.value.className = ''
  return

if config.src != 'camera'
  import('~/lib/rec_desktop.coffee')

export default {
components:{zAudio}
setup:=>
  left = sp """video 摄像头"""

  right = ref sp """pause 暂停
stop 结束录制
reset 重新录制
cancel 取消录制"""

  turn = (en)=>
    =>
      config[en] = if config[en] then '' else localStorage[en]
      if pause.value
        return

      if not config.video and not config.audio and config.src == 'camera'
        local.pause()
      return

  for i in ['audio', 'video']
    local[i] = turn(i)

  draw = shallowRef()
  nav = shallowRef()

  onMounted =>
    drag(nav.value)
    return

  {
    go:(en)=>
      if ['pen','rect','txt'].indexOf(en) + 1
        {value:val} = draw
        if val != en
          DRAW.shape = draw.value = en
          if val
            return
        else
          draw.value = ''
          await recbar.draw_x()
          return
        await recbar.draw()
        return

      (local[en] or recbar[en])()
      return
    left
    nav
    right
    code
    minute
    second
    pause
    config
    draw
  }
}
</script>
